/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component} from 'react';
import {Form, Input, Radio, Select, Switch, Button, Tooltip, Icon, Checkbox, InputNumber} from 'antd';
import request from '@/utils/request';
import {connect} from 'dva';
import styles from './index.less'
import {convertCurrency} from '@/utils/utils';

const FormItem = Form.Item;
const {TextArea} = Input;

const RadioGroup = Radio.Group;
const Option = Select.Option;

class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      level: 0,
      invoices: [{
        detail:[{hsbz:true,taxrate:'0'},{hsbz:true,taxrate:'0'},{hsbz:true,taxrate:'0'},{hsbz:true,taxrate:'0'},{hsbz:true,taxrate:'0'},{hsbz:true,taxrate:'0'},{hsbz:true,taxrate:'0'},{hsbz:true,taxrate:'0'},]
      }],
      detail: {},
      mc: '',
      nsrsbr: '',
      dzdh: '',
      khh: '',
      sjhm: '',
      yxdz: '',
      bz: '',
      bz1: '',
      bz2: '',
      mc2:'吐鲁番市万泉水务有限公司',
      nsrsbh2:'91650402229031251N',
      dhdz2:'吐鲁番市高昌路83号0995-8531942',
      khh2:'中国银行吐鲁番市绿洲路支行107665364043',
      invoicing_type: '',
      mode:'2',
      step: 1
    };
  }

  onChangeState = (tyle, e) => {
    this.setState({
      [tyle]: e.target.value
    })
  }

  componentDidMount() {
    const that = this;
    // this.fetchDetail()

  }

  getPreView = () => {
    const that = this;
    that.setState({
      step: 2
    })
    return
    request(`/paper_invoices/preview`, {
      method: 'GET',
      params: {
        payment_id: this.props.editRecord.id,
        invoicing_type: this.state.invoicing_type
      }
    }).then((response) => {
      console.log('response', response)
      if (response.status === 200) {
        for (let i = 0; i < response.data.data.length; i++) {
          let restLength = 8 - response.data.data[i].detail.length;
          if (that.state.invoicing_type === 3) {
            restLength = 4 - response.data.data[i].detail.length;

          }
          for (let j = 0; j < restLength; j++) {
            response.data.data[i].detail.push({})
          }

        }

        that.setState({
          invoices: response.data.data,
          dhdz2: '' + response.data.data[0].saleaddress + response.data.data[0].salephone,
          khh2: response.data.data[0].saleaccount,
          step: 2
        })


      }
    })
  }
  //获取基本信息
  fetchDetail = () => {
    const that = this;
    request(`/accounts/${this.props.editRecord.account.id}`, {
      method: 'GET',
      params: {},
    }).then((response) => {
      console.log('fetchDetail', response)
      if (response.status === 200) {
        that.setState({
          detail: response.data.data,
          mc: response.data.data.name,
          nsrsbr: response.data.data.buyer_tax_number,
          dzdh: response.data.data.address,
          khh: response.data.data.buyer_bank_account,
          sjhm: response.data.data.invoice_push_mobile,
          yxdz: response.data.data.invoice_push_email,
        })
      }


    });
  };
  onChangeItemState=(index,name,e)=>{
    this.state.invoices[0].detail[index][name]=e.target.value;
    this.setState({
      invoices:this.state.invoices
    })
  }
  onChangeItemStateNumber=(index,name,e)=>{
    let invoices_item=this.state.invoices[0].detail[index]
    if(name==='hsbz'){
      invoices_item[name]=e.target.checked;
    }else{
      invoices_item[name]=e;
    }


    if(invoices_item.hsbz){
      //含税
      if(name==='hsbz'||name==='taxrate'){
        if(invoices_item.item_total&&invoices_item.taxrate){ //有含税金额和税率，计算不含税金额
          if( invoices_item.num){//有数量计算不含税单价
            invoices_item.price=invoices_item.item_total/invoices_item.num
          }

        }
      }else{
        if((name==='num'||name==='price')&&invoices_item.num*invoices_item.price){ //有数量和单价计算金额
          invoices_item.item_total=(invoices_item.num*invoices_item.price).toFixed(8);
          invoices_item.item_total=Math.round(invoices_item.item_total*100)/100
        }else if((name==='item_total')&&invoices_item.price&&invoices_item.item_total){//有金额和单价计算数量
          invoices_item.num=(invoices_item.item_total/invoices_item.price).toFixed(8);
        }else if((name==='item_total')&&invoices_item.num&&invoices_item.item_total){//有金额和数量计算单价
          invoices_item.price=(invoices_item.item_total/invoices_item.num).toFixed(8);
        }
      }

      if(invoices_item.item_total&&invoices_item.taxrate){//有金额和税率计算税额
        console.log('有金额和税率计算税额')
        invoices_item.itemTaxrate=Math.round((invoices_item.item_total * (Number(invoices_item.taxrate) / (1 + Number(invoices_item.taxrate))))*100)/100
        invoices_item.no_item_total=Math.round((Number(invoices_item.item_total)-Number(invoices_item.itemTaxrate))*100)/100;
      }
    }else{
      //不含税
      if(name==='hsbz'||name==='taxrate'){
        if(invoices_item.item_total&&invoices_item.taxrate){ //有含税金额和税率，计算不含税金额
          console.log('含税金额',invoices_item.item_total)
          invoices_item.itemTaxrate=Math.round((invoices_item.item_total * (Number(invoices_item.taxrate) / (1 + Number(invoices_item.taxrate))))*100)/100
          invoices_item.no_item_total=Math.round((Number(invoices_item.item_total)-Number(invoices_item.itemTaxrate))*100)/100;
          if( invoices_item.num){//有数量计算不含税单价
            invoices_item.no_price=invoices_item.no_item_total/invoices_item.num
          }

        }
      }else{
        if((name==='num'||name==='no_price')&&invoices_item.num*invoices_item.no_price){ //有数量和单价计算金额
          invoices_item.no_item_total=(invoices_item.num*invoices_item.no_price).toFixed(8);
          invoices_item.no_item_total=Math.round(invoices_item.no_item_total*100)/100
        }else if((name==='no_item_total')&&invoices_item.no_price&&invoices_item.no_item_total){//有金额和单价计算数量
          invoices_item.num=(invoices_item.no_item_total/invoices_item.no_price).toFixed(8);
        }else if((name==='no_item_total')&&invoices_item.num&&invoices_item.no_item_total){//有金额和数量计算单价
          invoices_item.no_price=(invoices_item.no_item_total/invoices_item.num).toFixed(8);
        }
        if(invoices_item.no_item_total&&invoices_item.taxrate) {//有金额和税率计算税额
          invoices_item.itemTaxrate = Math.round((invoices_item.no_item_total * (Number(invoices_item.taxrate))) * 100) / 100;
          invoices_item.item_total = invoices_item.no_item_total + invoices_item.itemTaxrate
        }

      }

    }

    this.setState({
      invoices:this.state.invoices
    })


    return


    if(name!=='hsbz'){
      if(invoices_item.hsbz){
        if(name==='taxrate'&&invoices_item.item_total){
          invoices_item.itemTaxrate=Math.round((invoices_item.item_total * (Number(e) / (1 + Number(e))))*100)/100
        }else if(invoices_item.taxrate&&invoices_item.item_total){
          invoices_item.itemTaxrate=Math.round((invoices_item.item_total * (Number(invoices_item.taxrate) / (1 + Number(invoices_item.taxrate))))*100)/100
        }
      }else{
        if(name==='taxrate'&&invoices_item.item_total){
          invoices_item.itemTaxrate=Math.round((invoices_item.item_total * (Number(e)))*100)/100
        }else if(invoices_item.taxrate&&invoices_item.item_total){
          invoices_item.itemTaxrate=Math.round((invoices_item.item_total * (Number(invoices_item.taxrate)))*100)/100
        }
      }
    }

    if(name==='hsbz'&&invoices_item.item_total&&invoices_item.hsbz&&invoices_item.taxrate){
      invoices_item.item_total=Number(invoices_item.item_total)+Number(invoices_item.itemTaxrate);
    }else if(name==='hsbz'&&invoices_item.item_total&&!invoices_item.hsbz&&invoices_item.taxrate){
      invoices_item.item_total=Number(invoices_item.item_total)-Number(invoices_item.itemTaxrate);
    }


    this.setState({
      invoices:this.state.invoices
    })
  }
  renderInvoicesItem = (invoices_item) => {
    console.log('invoices_item', invoices_item)
    return invoices_item.detail.map((item, index) => {
      console.log('item.hsbz',item.hsbz)
      return <tr key={index} style={{height: '20px'}}>
        <td><Checkbox checked={item.hsbz} value={item.hsbz} onChange={(e) => {
          this.onChangeItemStateNumber(index,'hsbz', e)
        }} ></Checkbox></td>
        <td style={{position:'relative'}}><Input style={{padding:'0 8px',height:'25px'}} defaultValue={''} value={item.goodsname} onChange={(e) => {
          this.onChangeItemState(index,'goodsname', e)
        }} className={styles.invoice_item_input}   />
       {/*    <Tooltip title="选择用水性质">
            <Icon  style={{position:'absolute',right:'0',top:"0",padding:"4px",cursor:'pointer'}} type="dash" />
          </Tooltip> */}
        </td>
        <td><Input style={{padding:'0 8px',height:'25px',width:'100%',borderBottom:'0'}} defaultValue={''} value={item.spec} onChange={(e) => {
          this.onChangeItemState(index,'spec', e)
        }} className={styles.invoice_item_input}   /></td>
        <td><Input style={{padding:'0 8px',height:'25px',width:'100%',borderBottom:'0'}} defaultValue={''} value={item.unit} onChange={(e) => {
          this.onChangeItemState(index,'unit', e)
        }} className={styles.invoice_item_input}   /></td>
        <td><InputNumber min={0} style={{height:'25px',width:'100%',borderBottom:'0',position:'relative',top:'-1px'}} defaultValue={''} value={item.num} onChange={(e) => {
          this.onChangeItemStateNumber(index,'num', e)
        }} className={styles.invoice_item_input}   /></td>
        <td><InputNumber  min={0} s style={{height:'25px',width:'100%',borderBottom:'0',position:'relative',top:'-1px'}} defaultValue={''}
                          value={item[item.hsbz?'price':'no_price']} onChange={(e) => {
          this.onChangeItemStateNumber(index,item.hsbz?'price':'no_price', e)
        }} className={styles.invoice_item_input}   /></td>
        <td><InputNumber  min={0} s style={{height:'25px',width:'100%',borderBottom:'0',position:'relative',top:'-1px'}} defaultValue={''}
                          value={item[item.hsbz?'item_total':'no_item_total']} onChange={(e) => {
          this.onChangeItemStateNumber(index,item.hsbz?'item_total':'no_item_total', e)
        }} className={styles.invoice_item_input}   /></td>
        <td> <Select  value={item.taxrate} style={{ width: '100%' }}  onChange={(e) => {
          this.onChangeItemStateNumber(index,'taxrate', e)
        }}>
          <Option value="0">免税</Option>
          <Option value="0.01">1%</Option>
          <Option value="0.015">1.5%</Option>
          <Option value="0.03">3%</Option>
          <Option value="0.04">4%</Option>
          <Option value="0.05">5%</Option>
          <Option value="0.06">6%</Option>
          <Option value="0.09">9%</Option>
          <Option value="0.10">10%</Option>
          <Option value="0.11">11%</Option>
          <Option value="0.13">13%</Option>
          <Option value="0.16">16%</Option>
          <Option value="0.17">17%</Option>
        </Select></td>
        <td>{item.itemTaxrate}</td>
      </tr>
    })
  }
  renderInvoicesTable = () => {
    const invoicing_type = this.state.invoicing_type;
    const invoices = this.state.invoices;
    console.log('invoices', invoices)
    return invoices.map((item, index) => {
      let bhtaxtotal=0;
      let taxtotal=0;
      let alltotal=0;
      for(let i=0;i<item.detail.length;i++){
        if(item.detail[i].hsbz&&item.detail[i].item_total){
          bhtaxtotal+=Number(item.detail[i].item_total)
        }else if(!item.detail[i].hsbz&&item.detail[i].no_item_total){
          bhtaxtotal+=Number(item.detail[i].no_item_total)
        }
        if(item.detail[i].itemTaxrate){
          taxtotal+=Number(item.detail[i].itemTaxrate)
        }
        if(item.detail[i].hsbz&&item.detail[i].item_total){
          alltotal+=Number(item.detail[i].item_total)
        }else if(!item.detail[i].hsbz&&item.detail[i].item_total){
          alltotal+=Number(item.detail[i].no_item_total)
          alltotal+=Number(item.detail[i].itemTaxrate)
        }
      }
      return <div key={index} style={{position:'relative'}}>
        <p style={{position:'absolute',top:'20px',left:'0px',cursor:'pointer'}} onClick={()=>{
          this.setState({
            step:1
          })
        }}>返回选择发票类型</p>
        <h3 style={{
          textAlign: 'center',
          marginBottom: '16px',
          fontSize: '32px',
          color: (index === 1 || invoicing_type === 4) ? '#ff7400' : '#1950a5',
          fontWeight: 'bold'
        }}>
          {invoicing_type === 1 && '普通发票(电子)'}
          {invoicing_type === 2 && '普通发票(纸质)'}
          {invoicing_type === 4 && '专用发票(纸质)'}
          {invoicing_type === 3 && index === 0 && '专用发票(纸质)'}
          {invoicing_type === 3 && index === 1 && '普通发票(纸质)'}
        </h3>
        <div style={{textAlign:'center',position:'relative',top:'-12px'}}>
          <Select value={this.state.mode} style={{ width: '160px' }} onChange={(e)=>{
            this.setState({
              mode:e
            })
          }
          }>
            {
              [ { id: '2', value: '卡表收费' },
                {id: '3', value: '处罚收费'}, {id: '4', value: '水车收费'}, {id: '5', value: '补交水费'}, {id: '6', value: '预交收费'}
              ].map((item, index) => {
                return <Option key={index} value={item.id}>{item.value}</Option>;
              })
            }
          </Select>
        </div>
        <Form onSubmit={this.handleSubmit}>
          <table
            className={`${styles.invoice_make_blue} ${(index === 1 || invoicing_type === 4) ? styles.invoice_make_orange : ''}`}
            style={{width: '100%'}}>
            {
              <tbody>
              <tr>
                <th
                  className={`${styles.invoice_make_blue} ${(index === 1 || invoicing_type === 4) ? styles.invoice_make_orange : ''}`}
                  style={{width: "26px", fontSize: '13px', padding: '0 4px'}}>购买方
                </th>
                <td style={{width: "50%"}}>
                  <div className={styles.invoice_item}>
                    <label
                      className={`${styles.invoice_item_label} ${(index === 1 || invoicing_type === 4) ? styles.invoice_item_label2 : ''}`}>名 <span
                      style={{marginLeft: '52px'}}>称</span> :</label>
                    <span className={styles.invoice_item_input_wrap}>
                      <Input defaultValue={''} value={this.state.mc} onChange={(e) => {
                        this.onChangeState('mc', e)
                      }} className={styles.invoice_item_input}/>
                    </span>
                  </div>
                  <div className={styles.invoice_item}>
                    <label
                      className={`${styles.invoice_item_label} ${(index === 1 || invoicing_type === 4) ? styles.invoice_item_label2 : ''}`}>纳税人识别号
                      :</label>
                    <span className={styles.invoice_item_input_wrap}>
                       <Input defaultValue={''} value={this.state.nsrsbr} onChange={(e) => {
                         this.onChangeState('nsrsbr', e)
                       }} className={styles.invoice_item_input}/>
                    </span>
                  </div>
                  <div className={styles.invoice_item}>
                    <label
                      className={`${styles.invoice_item_label} ${(index === 1 || invoicing_type === 4) ? styles.invoice_item_label2 : ''}`}>地址、 <span
                      style={{marginLeft: '10px'}}>电话</span> :</label>
                    <span className={styles.invoice_item_input_wrap}>
                       <Input defaultValue={''} value={this.state.dzdh} onChange={(e) => {
                         this.onChangeState('dzdh', e)
                       }} className={styles.invoice_item_input}/>
                    </span>
                  </div>
                  <div className={styles.invoice_item}>
                    <label
                      className={`${styles.invoice_item_label} ${(index === 1 || invoicing_type === 4) ? styles.invoice_item_label2 : ''}`}>开户行及帐号
                      :</label>
                    <span className={styles.invoice_item_input_wrap}>
                       <Input defaultValue={''} value={this.state.khh} onChange={(e) => {
                         this.onChangeState('khh', e)
                       }} className={styles.invoice_item_input}/>
                    </span>
                  </div>
                </td>
                <th
                  className={`${styles.invoice_make_blue} ${(index === 1 || invoicing_type === 4) ? styles.invoice_make_orange : ''}`}
                  style={{width: "26px", fontSize: '13px', padding: '0 4px'}}>通知到
                </th>
                <td style={{width: "50%", verticalAlign: 'top'}}>
                  <div className={styles.invoice_item}>
                    <label
                      className={`${styles.invoice_item_label} ${(index === 1 || invoicing_type === 4) ? styles.invoice_item_label2 : ''}`}>手机号码
                      :</label>
                    <span className={styles.invoice_item_input_wrap}>
                        <Input defaultValue={''} value={this.state.sjhm} onChange={(e) => {
                          this.onChangeState('sjhm', e)
                        }} className={styles.invoice_item_input}/>
                    </span>
                  </div>
                  <div className={styles.invoice_item}>
                    <label
                      className={`${styles.invoice_item_label} ${(index === 1 || invoicing_type === 4) ? styles.invoice_item_label2 : ''}`}>邮箱地址
                      :</label>
                    <span className={styles.invoice_item_input_wrap}>
                        <Input defaultValue={''} value={this.state.yxdz} onChange={(e) => {
                          this.onChangeState('yxdz', e)
                        }} className={styles.invoice_item_input}/>
                    </span>
                  </div>
                </td>
              </tr>
              </tbody>}

          </table>
          <table
            className={`${styles.invoice_make_blue} ${(index === 1 || invoicing_type === 4) ? styles.invoice_make_orange : ''}
           ${styles.invoice_list} ${(index === 1 || invoicing_type === 4) ? styles.invoice_list2 : ''} invoice_table`} style={{
            width: '100%',
            borderBottom: '0', borderTop: '0', textAlign: 'center'
          }}>
            <thead>
            <tr>
              <th style={{width:'80px'}}>是否含税</th>
              <th style={{width:'250px'}}>*简称*货物或应税劳务、服务名称</th>
              <th style={{width:'130px'}}>规格型号</th>
              <th style={{width:'80px'}}>单位</th>
              <th style={{width:'100px'}}>数量</th>
              <th style={{width:'120px'}}>单价</th>
              <th  style={{width:'130px'}}>金额</th>
              <th  style={{width:'80px'}}>税率</th>
              <th>税额</th>
            </tr>
            </thead>
            <tbody>
            {this.renderInvoicesItem(item)}
            <tr style={{
              height: '23px',
              borderBottom: `2px solid ${(index === 1 || invoicing_type === 4) ? '#ff7400' : '#1950a5'}`
            }}>
              <td></td>
              <td>合计</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td>￥{Math.round(bhtaxtotal*100)/100}</td>
              <td></td>
              <td>￥{Math.round((taxtotal.toFixed(2))*100)/100}</td>
            </tr>
            <tr style={{height: '23px'}}>
              <td></td>
              <td>价税合计(大写)</td>
              <td colSpan="7"><span style={{
                float: 'left',
                marginLeft: '10px'
              }}>{convertCurrency(Math.round((alltotal)*100)/100)}</span>
                <span style={{
                  float: 'right',
                  marginRight: '50px'
                }}>(小写)￥{Math.round((alltotal)*100)/100}</span></td>
            </tr>
            </tbody>
            <tbody>
            </tbody>

          </table>

          <table
            className={`${styles.invoice_make_blue} ${(index === 1 || invoicing_type === 4) ? styles.invoice_make_orange : ''} `}
            style={{width: '100%'}}>
            {
              <tbody>
              <tr>
                <th
                  className={`${styles.invoice_make_blue} ${(index === 1 || invoicing_type === 4) ? styles.invoice_make_orange : ''}`}
                  style={{width: "26px", fontSize: '13px', padding: '0 4px'}}>销售方
                </th>
                <td style={{width: "50%"}}>
                  <div className={styles.invoice_item}>
                    <label
                      className={`${styles.invoice_item_label} ${(index === 1 || invoicing_type === 4) ? styles.invoice_item_label2 : ''}`}>名 <span
                      style={{marginLeft: '52px'}}>称</span> :</label>
                    <span className={styles.invoice_item_input_wrap}>
                      <Input disabled={true}  defaultValue={this.state.mc2}
                              value={this.state.mc2}  onChange={(e) => {
                        this.onChangeState('mc2', e)
                      }} className={styles.invoice_item_input}/>
                    </span>
                  </div>
                  <div className={styles.invoice_item}>
                    <label
                      className={`${styles.invoice_item_label} ${(index === 1 || invoicing_type === 4) ? styles.invoice_item_label2 : ''}`}>纳税人识别号
                      :</label>
                    <span className={styles.invoice_item_input_wrap}>
                       <Input disabled={true}  defaultValue={this.state.nsrsbh2}
                               value={this.state.nsrsbh2}  onChange={(e) => {
                         this.onChangeState('nsrsbh2', e)
                       }}  className={styles.invoice_item_input}/>
                    </span>
                  </div>
                  <div className={styles.invoice_item}>
                    <label
                      className={`${styles.invoice_item_label} ${(index === 1 || invoicing_type === 4) ? styles.invoice_item_label2 : ''}`}>地址、 <span
                      style={{marginLeft: '10px'}}>电话</span> :</label>
                    <span className={styles.invoice_item_input_wrap}>
                       <Input disabled={true} defaultValue={this.state.dhdz2}
                              value={this.state.dhdz2} onChange={(e) => {
                         this.onChangeState('dhdz2', e)
                       }} className={styles.invoice_item_input}/>
                    </span>
                  </div>
                  <div className={styles.invoice_item}>
                    <label
                      className={`${styles.invoice_item_label} ${(index === 1 || invoicing_type === 4) ? styles.invoice_item_label2 : ''}`}>开户行及帐号
                      :</label>
                    <span className={styles.invoice_item_input_wrap}>
                       <Input disabled={true} defaultValue={item.saleaccount} value={this.state.khh2}
                              onChange={(e) => {
                                this.onChangeState('khh2', e)
                              }} className={styles.invoice_item_input}/>
                    </span>
                  </div>
                </td>
                <th
                  className={`${styles.invoice_make_blue} ${(index === 1 || invoicing_type === 4) ? styles.invoice_make_orange : ''}`}
                  style={{width: "26px", fontSize: '13px', padding: '0 4px'}}>备注
                </th>
                <td style={{width: "50%", verticalAlign: 'top'}}>
                  {
                    invoicing_type !== 3 &&
                    <TextArea defaultValue={''} value={this.state.bz} onChange={(e) => {
                      this.onChangeState('bz', e)
                    }} className={styles.invoice_item_input} autoSize={{minRows: 6, maxRows: 6}}/>
                  }
                  {
                    invoicing_type === 3  && index === 0 &&
                    <TextArea defaultValue={''} value={this.state.bz1} onChange={(e) => {
                      this.onChangeState('bz1', e)
                    }} className={styles.invoice_item_input} autoSize={{minRows: 6, maxRows: 6}}/>
                  }
                  {
                    invoicing_type === 3  && index === 1 &&
                    <TextArea defaultValue={''} value={this.state.bz2} onChange={(e) => {
                      this.onChangeState('bz2', e)
                    }} className={styles.invoice_item_input} autoSize={{minRows: 6, maxRows: 6}}/>
                  }
                </td>
              </tr>
              </tbody>}

          </table>
          <table style={{width: '100%', marginTop: '10px'}}>
            <tbody>
            <tr>
              <td style={{paddingLeft: '10px'}}> 收 款 人 : 张婷</td>
              <td> 复 核 : 熊楚燕</td>
              <td> 销 售 方 : (章)</td>
            </tr>
            </tbody>
          </table>

        </Form>
      </div>
    })
  }

  render() {
    const {getFieldDecorator} = this.props.form;
    const editRecord = this.props.editRecord;

    return (
      <div style={{fontSize: "13px"}}>
        {
          this.state.step === 1 &&
          <div>
            <div style={{width: '440px', margin: '50px auto',textAlign:'center'}}>
              <div onClick={() => {
                this.setState({invoicing_type: 1}, function () {
                  this.getPreView()
                })
              }} style={{
                width: '250px',
                height: '60px',
                lineHeight: '60px',
                cursor: 'pointer',
                margin: '10px',
                display: 'inline-block',
                textAlign: 'center',
                border: '1px solid #ccc',
                borderRadius: '5px',
                background: '#0a82ff',
                color: '#fff',
                fontWeight: 'bold',
                fontSize: '18px'
              }}>电子发票 >
              </div>
              <div onClick={() => {
                this.setState({invoicing_type: 2}, function () {
                  this.getPreView()
                })
              }} style={{
                width: '250px',
                height: '60px',
                lineHeight: '60px',
                cursor: 'pointer',
                margin: '10px',
                display: 'inline-block',
                textAlign: 'center',
                border: '1px solid #ccc',
                borderRadius: '5px',
                background: '#0060c4',
                color: '#fff',
                fontWeight: 'bold',
                fontSize: '18px'
              }}>纸质发票 >
              </div>
              <div onClick={() => {
                this.setState({invoicing_type: 4}, function () {
                  this.getPreView()
                })
              }} style={{
                width: '250px',
                height: '60px',
                lineHeight: '60px',
                cursor: 'pointer',
                margin: '10px',
                display: 'inline-block',
                textAlign: 'center',
                border: '1px solid #ccc',
                borderRadius: '5px',
                background: '#ff7400',
                color: '#fff',
                fontWeight: 'bold',
                fontSize: '18px'
              }}>专用发票 >
              </div>
            </div>
          </div>
        }
        {
          this.state.step === 2 && this.renderInvoicesTable()

        }

      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);
